<template>
    <div class="login-wrap">
        <vue-particles
                color="#6caff5"
                :particleOpacity="0.7"
                :particlesNumber="80"
                shapeType="circle"
                :particleSize="4"
                linesColor="#70adec"
                :linesWidth="1"
                :lineLinked="true"
                :lineOpacity="0.4"
                :linesDistance="120"
                :moveSpeed="3"
                :hoverEffect="true"
                hoverMode="grab"
                :clickEffect="true"
                clickMode="push"
        >
        </vue-particles>
        <div class="ms-login">
            <div class="ms-title">后台管理系统</div>
            <div class="ms-title-wel1">HOU TAI GUAN LI XI TONG</div>
            <div class="content-box-info">
                <div class="content-left">
                    <img src="../assets/img/a.png" alt="">
                </div>
                <div class="content-right">
                    <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content"
                             @keyup.enter.native="submitForm()">
                        <el-form-item prop="username">
                            <el-input v-model="param.username" placeholder="请输入用户名">
                                <el-button slot="prepend" icon="el-icon-lx-icon"></el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input type="password" placeholder="请输入密码" v-model="param.password">
                                <el-button slot="prepend" icon="el-icon-lx-mima"></el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="code">
                            <el-input placeholder="请输入验证码" v-model="param.code">
                            </el-input>
                            <img src="../assets/img/img.jpg" alt="" class="imgCode">
                        </el-form-item>
                        <div class="login-btn">
                            <el-button type="primary" @click="submitForm()">登录</el-button>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                param: {
                    username: 'admin',
                    password: '123123',
                    code: ''
                },
                rules: {
                    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                    code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
                }
            };
        },
        methods: {
            submitForm() {
                this.$refs.login.validate(valid => {
                    if (valid) {
                        this.$message.success('登录成功');
                        localStorage.setItem('ms_username', this.param.username);
                        this.$router.push('/');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(../assets/img/login-bg.jpg);
        background-size: 100%;
    }

    .ms-title {
        width: 100%;
        line-height: 50px;
        height: 50px;
        text-align: center;
        font-size: 28px;
        color: #fff;
    }

    .ms-title-wel1 {
        height: 50px;
        color: #fff;
        font-size: 12.38px;
        text-align: center;
    }

    .ms-login {
        position: absolute;
        left: 50%;
        top: 45%;
        width: 960px;
        height: 500px;
        margin: -190px 0 0 -480px;
        border-radius: 5px;
        /*background: rgba(255, 255, 255, 0.3);*/
        /*overflow: hidden;*/
    }

    .ms-content {
        padding: 30px 30px;
    }

    .login-btn {
        text-align: center;
    }

    .login-btn button {
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
    }

    .login-tips {
        font-size: 12px;
        line-height: 30px;
        color: #fff;
    }

    .content-box-info {
        width: 100%;
        height: 400px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(255, 255, 255, 0.8);

        .content-left {
            width: 50%;
            border-right: 1px solid #b0c6dc;

            img {
                width: 100%;
            }
        }

        .content-right {
            width: calc(50% - 60px);
            padding: 30px;
            margin: auto;

            .imgCode {
                position: absolute;
                right: 1px;
                top: 2px;
                width: 100px;
                height: 30px;
            }
        }

        .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
            margin-bottom: 24px;
        }
    }

</style>
